<template>
	<view class="follow-page">
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: opt.type == 2 }" :style="{color : t('color1')}"
				@click="switchTab(2)">
				我的关注
				<view :style="{ backgroundColor: t('color1') }" class="active-curve"></view>
			</view>
			<view class="tab-item" :class="{ active: opt.type == 3 }" :style="{color : t('color1')}"
				@click="switchTab(3)">
				我的粉丝
				<view :style="{ backgroundColor: t('color1') }" class="active-curve"></view>
			</view>
		</view>

		<view class="follow-list">
			<view class="follow-item" v-for="(item, index) in followList" :key="index">
				<view class="user-info" @click="toWork(item)">
					<view class="avatar-wrapper">
						<image class="avatar" :src="item.member && item.member.headimg" mode="aspectFill"></image>
					</view>
					<view class="info-content">
						<view class="username">{{item.member&& item.member.nickname }}</view>
						<view class="follow-time" v-if="opt.type == 2">{{ item.create_time }}</view>
						<view class="follow-time" v-if="opt.type == 3">关注了你 {{ item.create_time }}</view>
					</view>
				</view>
				<view class="action-buttons">
					<text class="followed-t0" v-if="opt.type==3 &&  item.is_each_follow == 0" @tap.stop="followUser(item)">回关</text>
					<block v-if="item.is_each_follow == 1">
						<text class="followed-t1" @tap.stop="followUser(item)" v-if="opt.type == 2">互相关注</text>
						<text class="followed-t2" @tap.stop="sendMessage(item)">发私信</text>
					</block>

				</view>
			</view>
			<view class="load-more">
				<text v-if="loading">加载中...</text>
				<text v-else-if="noMore">没有更多了</text>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				page: 1, // 当前页码
				limit: 10, // 每页条数
				loading: false, // 是否正在加载
				noMore: false, // 是否无更多数据
				opt: {},
				followList: [],
			};
		},
		onLoad(opt) {
			if (opt.type) {
				this.opt = app.getopts(opt);
				uni.setNavigationBarTitle({
					title: opt.type == 2 ? '我的关注' : '我的粉丝'
				});
			}

			this.getlist()
		},

		onPullDownRefresh() {
			this.getdata();
			this.products = [];
			this.page = 1;
			this.getlist(false, true);
		},
		onReachBottom() {
			this.getlist(true, false); // 加载下一页
		},
		methods: {
			getlist(isLoadMore = false, forceRefresh = false) {
				if ((this.loading || this.noMore) && !forceRefresh) return;
				this.loading = true;
				// 如果是加载更多，页码+1；否则重置为第1页
				const page = isLoadMore ? this.page + 1 : 1;

				app.get('MemberNote/followList', {

					page: page,
					limit: this.limit,
					type: this.opt.type
				}, (res) => {
					this.loaded()
					if (res.status == 200) {
						if (isLoadMore) {
							this.followList = [...this.followList, ...res.data];
							this.page = page;
						} else {
							this.followList = res.data;
							this.page = 1;
						}
						// 判断是否还有更多数据
						this.noMore = res.data.length < this.limit;
					} else {
						app.error(res.msg);
					}
					this.loading = false;
				});
			},
			sendMessage(user) {
				// 发送私信逻辑
				app.goto(
					"/pagesChat/chat/index?id=" +
					user.member.id +
					"&type=2&name=" +
					user.member.nickname +
					"&headimg=" +
					user.member.headimg
				);
			},
			followUser(user) {
				const that = this;
				const isFollowing = user.is_each_follow === 1; // 当前是否已互关

				// 根据状态决定传参
				const requestData = isFollowing ? {
						follow_mid: user.follow_mid
					} // 取消关注时传follow_mid
					:
					{
						follow_mid: user.mid
					}; // 关注时传mid

				app.post('MemberNote/followMember', requestData, function(data) {
					if (data.status == 200) {
						// 找到当前用户的索引
						const index = that.followList.findIndex(item => item.mid === user.mid);
						if (index !== -1) {
							// Vue响应式更新
							that.$set(that.followList, index, {
								...that.followList[index],
								is_each_follow: isFollowing ? 0 : 1 // 切换状态
							});
						}
					} else {
						app.error(data.msg);
					}
				});
			},
			switchTab(type) {
				if (this.opt.type === type) return; // 避免重复加载
				this.followList = [];
				this.opt.type = type;
				// 2. 重置分页状态
				this.page = 1;
				this.noMore = false;

				// 3. 重新加载数据（不是加载更多！）
				this.getlist(); // 不传参数，默认从第一页开始

				uni.setNavigationBarTitle({
					title: type == 2 ? '我的关注' : '我的粉丝'
				});
			},
			toWork(item) {
				if(this.opt.type == 2){
					uni.navigateTo({
						url: '/pagesEchart/find/works?mid=' + item.follow_mid
					})
				}
				if(this.opt.type == 3){
					uni.navigateTo({
						url: '/pagesEchart/find/works?mid=' + item.mid
					})
				}
			}
		},
	};
</script>

<style lang="scss">
	.follow-page {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;

		.follow-list {
			.follow-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 30rpx;
				background-color: #fff;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.user-info {
					display: flex;
					align-items: center;
					flex: 1;

					.avatar-wrapper {
						margin-right: 24rpx;

						.avatar {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}
					}

					.info-content {
						.username {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}

						.follow-time {
							font-size: 26rpx;
							color: #999;
						}
					}
				}

				.action-buttons {
					display: flex;
					align-items: center;
					gap: 16rpx;

					.action-btn {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 30rpx;
						height: 60rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
						background: none;

						&.message {
							border: 1rpx solid #e5e5e5;
							color: #333;
							background-color: #fff;

							.btn-icon {
								width: 28rpx;
								height: 28rpx;
								margin-right: 8rpx;
							}
						}

						&.follow {
							background-color: #e32855;
							color: #fff;
							border: none;
							padding: 0 40rpx;
							border: #e32855 2rpx solid;
							padding: 0 30rpx;
							height: 60rpx;
							border-radius: 30rpx;
							font-size: 28rpx;
						}

						&::after {
							border: none;
						}
					}

					.followed-t0 {
						font-size: 28rpx;
						color: #e32855;
						border: #e32855 2rpx solid;
						padding: 10rpx 30rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
					}

					.followed-t1 {
						font-size: 28rpx;
						color: #999;
						border: #999 2rpx solid;
						padding: 10rpx 30rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
					}

					.followed-t2 {
						font-size: 28rpx;
						color: #000000;
						border: #000000 2rpx solid;
						padding: 10rpx 30rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.tab-bar {
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #666;
	}

	.tab-item.active {

		font-weight: bold;
		position: relative;
	}

	.tab-item.active .active-curve {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 4rpx;

	}

	.load-more {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>